<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>823680621@QQ.com</title>
	<style>
	*{margin: 0;padding: 0;}
	html,body{
		width: 100%;
		height: 100%;
		display: flex;
	}
		#box{
			width: 40%;
			height: 100%;
			border:5px dotted red;
			box-sizing: border-box;
			margin:auto;
		}
		#imgbox{
			width: 60%;
			height: 100%;
			border:5px dotted green;
			box-sizing: border-box;
			margin:auto;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<div id="imgbox"></div>
</body>
<script>
	imgbox.ondragover=function(e){
		e.preventDefault();//阻止在接收区移动时的默认事件
	}
	imgbox.ondrop=function(e){
		e.preventDefault();//阻止释放时的默认事件
		e.stopPropagation();//火狐下阻止事件冒泡
		var file=e.dataTransfer.files[0];
		box.innerHTML+="文件名："+file.name+
		"<br>文件大小："+(file.size/1024/1024).toFixed(2)+
		"MB<br>文件类型："+file.type+"<br>"+
		"最后一次修改时间"+(file.lastModifiedDate.toLocaleDateString())+
							(file.lastModifiedDate.toLocaleTimeString())+"<br><hr>";

	//window.URL 指向内存当中的URL地址 url地址就表示图片信息
	//这么做是为了不让二进制数据渲染到页面或不存放在js中
	var url=window.URL.createObjectURL(file);
	imgbox.innerHTML+='<img src="'+url+'">';
/*
	//创建文件分析对象
	var reader=new FileReader();
	//分析文件信息  base64编码 64个字符组成的
	reader.readAsDataURL(file);
	reader.onload=function(){
		//console.log(this.result);//url
		if (/image/.test(this.result)) {//判断是否为图片
			var img=new Image();
			img.src=this.result;
			img.onload=function(){
			imgbox.appendChild(img)
		}
		
		}else{
			alert("不是图片将不能查看预览图")
		}
	}
*/
	}

</script>
</html>